<template>
  <el-container class="login">
    <el-main class="login-body">
      <div class="login-div">
        <div class="login-content">
          <!-- APP下载 -->
          <div class="appDownload" @mouseenter="mouseenter" @mouseleave="mouseleave" @click="isDownloadShow">
            <i class="el-icon-mobile-phone"></i>APP下载
          </div>
          <div class="appDownloadBox" v-if="appDownloadImgShow">
            <img src="static/img/login/appDownload.png" />
          </div>
          <!-- 登录标题 -->
          <div class="inner-left">
            <div class="bigTitle">欢迎进入</div>
            <div class="smallTitle">励图开发框架</div>
          </div>
          <!-- 登录表单 -->
          <div class="inner-right">
            <div class="iptOuter">
              <!-- 表单标题 -->
              <div class="title">
              </div>
              <!-- 表单 -->
              <div class="inner-form">
                <form id="login-form">
                  <div class="input">
                    <el-input v-model="username" placeholder="请输入账号" @keyup.enter.native="dologin" prefix-icon="el-icon-user"></el-input>
                  </div>
                  <div class="input">
                    <el-input v-model="password" placeholder="请输入密码" @keyup.enter.native="dologin" show-password prefix-icon="el-icon-unlock"></el-input>
                  </div>
                  <el-button @click="dologin" type="primary" class="dologin-style" :disabled="loginbtnDisabled"> 登录 </el-button>
                </form>
              </div>
            </div>

          </div>
        </div>
        <div class="foot"> © 青岛励图智能科技信息有限公司 All Rights Reserved </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: "container",
    components: { top },
    data() {
      return {
        inputText: "text",
        username: "",
        password: "",
        systemCode: window.globle.systemCode,
        getAllVal: [],
        loginbtnDisabled: false, // 防止连点
        appDownloadImgShow: false, // app 下载地址图片显隐
        isClick: false, // 判断是否进行了点击（app下载地址）
      };
    },
    mounted() {
      var that = this;
    },
    methods: {
      changeInputValue() {
        if (this.password) {
          this.inputText = "password";
        } else {
          this.inputText = "text";
        }
      },
      dologin() {
        let that = this;
        if (!this.username) {
          this.$util.notify.error("请输入账号");
        } else if (!this.password) {
          this.$util.notify.error("请输入密码");
        } else {

          this.loginbtnDisabled = true;

          let param = new FormData();
          param.append("account", this.username);
          param.append("password", this.$md5(this.password));
          param.append("systemCode", that.systemCode);
          that.$req.postFree(param, api.login, function(_r) {
            let res = _r.data;
            that.$storage.setToken(res.token);

            that.$req.post({ systemCode: that.systemCode }, api.data, function(_rData) {
              res.dicts = {
                dictItemArr: _rData.data.dictItemArr,
                dictItems: _rData.data.dictItems
              };
              res.menus = _rData.data.menus;
              that.$util.notify.success("登录成功！");
              that.$store.dispatch("bindLogin", res).then(() => {});
              that.jump();
            }, function() {
              that.loginbtnDisabled = false;
            });
          }, function() {
            that.loginbtnDisabled = false;
          });
        }
      },
      jump() {
        let path = "";
        let query = {};
        path = "/";
        this.$router.push({ path: path, query: query });
      },
      // 控制 APP 下载地址显示
      // 点击 APP下载 按钮
      isDownloadShow() {
        // 如果点击 appDownloadImgShow == true 更新一下 isClick
        if (this.appDownloadImgShow && !this.isClick) {
          this.appDownloadImgShow = true
          this.isClick = true
        } else {
          // 点击固定时 关闭使用
          this.appDownloadImgShow = false
          this.isClick = false
        }
      },
      // 鼠标移入 APP下载 按钮
      mouseenter() {
        this.appDownloadImgShow = true;
      },
      // 鼠标移出 APP下载 按钮
      mouseleave() {
        this.appDownloadImgShow = this.isClick;
      },
    },

  };
</script>

<style lang="scss" scoped>
  // 背景样式
  .login {
    height: 100%;
    overflow: hidden;
    background: rgba(245, 245, 245, 1);
    position: relative;
  }

  // 主题样式
  .login-body {
    height: 100%;
    background: url("../../static/img/login/loginBg.png") no-repeat;
    background-size: 100% 100%;
  }

  // app下载
  .appDownload {
    position: absolute;
    top: 20px;
    right: 50px;
    width: 100px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    border-radius: 5px;
    background-color: #093370;
    user-select: none;
  }

  .appDownloadBox {
    width: 150px;
    height: 150px;
    padding-top: 13px;
    position: fixed;
    top: 70px;
    right: 50px;
    background: #081d41;
    border: 2px solid #264e85;
    border-radius: 5px;
    z-index: 999;

    img {
      width: 120px;
      height: 120px;
    }
  }

  .appDownloadBox:after,
  .appDownloadBox:before {
    bottom: 100%;
    left: 75%;
    border: 2px solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  .appDownloadBox:after {
    border-color: rgba(7, 26, 52, 0);
    border-bottom-color: #071a34;
    border-width: 11px;
    margin-left: -11px;
  }

  .appDownloadBox:before {
    border-color: rgba(10, 36, 78, 0);
    border-bottom-color: #264e85;
    border-width: 12px;
    margin-left: -12px;
  }

  .login-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .inner-left {
    // background: url("../../static/img/login/loginTitle.png");
    // background-size: 100% 100%;
    // background-repeat: no-repeat;
    width: 42%;
    height: 25.187%;
    margin-right: 8%;
    text-align: left;

    .bigTitle {
      color: #fff;
      font-size: calc(100vw * 112 / 1920);
      font-weight: 600;
      font-family: SourceHanSans;
      line-height: calc(100vw * 96 / 1920);
    }

    .smallTitle {
      color: #fff;
      font-size: calc(100vw * 64 / 1920);
      font-weight: 500;
      font-family: SourceHanSans;
      letter-spacing: calc(100vw * 16 / 1920);

    }
  }

  .inner-right {
    width: 23.438%;
    height: 58.766%;
    background: #FFFFFF;
    border-radius: 4px;

    .iptOuter {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 4px;

      .title {
        background: url("../../static/img/login/fromTitle.png") no-repeat;
        background-size: 100%;
        width: 25.6%;
        height: 10%;
        margin-top: 16.4%;
      }

      .inner-form {
        width: 100%;
        height: 100%;
      }

      #login-form {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 55%;
      }

      #login-form:first-child {
        margin-top: 8%;
      }

      #login-form>>>.el-button {
        background: #2864BA;
      }

      .input {
        width: 83.3%;
        background: #ffffff;
        border-radius: 6px;
        opacity: 1;
        border: 1px solid rgba(19, 20, 21, 0.1);
        margin-top: 8%;
      }

      .input>>>.el-input__inner {
        width: 100%;
        height: 56px;
        border-radius: 6px;
      }

      .input>>>.el-input__icon {
        color: rgba(181, 181, 181, 1);
      }

      .dologin-style {
        width: 84%;
        min-height: 20%;
        line-height: 20%;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #FEFEFE;
        margin-top: 50px;
      }
    }
  }

  .foot {
    color: #ffffff;
    text-align: center;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 10%;
  }

  @media screen and (max-width: 1400px) {
    .foot {
      color: #ffffff;
      text-align: center;
      width: 100%;
      text-align: center;
      position: absolute;
      bottom: 8%;
    }
  }
</style>